<script setup lang="ts">
    import { reactive, ref } from 'vue'//引入vue函数
    import type { FormInstance } from 'element-plus' //导入表单实例类型
    import { changeAdminPassword } from '@/api' //数据接口
    import { ElMessage } from 'element-plus' //导入消息框
    import { useRouter } from "vue-router" //导入路由函数

    //获得路由实例
    const router = useRouter()

    //定义表单数据对象
    const formObj = reactive({
        password:"",
        checkpwd:"",
    });

    //定义表单对象实例的引用
    const formRef = ref<FormInstance>()

    //定义表单验证规则
    const rules = reactive({
        password:[
            { required:true, message:"账号密码不能为空", trigger:"blur"}
        ],
        checkpwd:[
            { required:true, message:"确认密码不能为空", trigger:"blur"},
            { validator:checkpwdFun, trigger:"blur"}
        ]
    })

    //确认密码验证规则
    function checkpwdFun(_rule:any, value:any, callback:any){
        if(value != formObj.password){
            callback(new Error("两次输入的密码不一致"))
        }
        else{
            callback()//该项验证通过
        }
    }

    //表单提交，添加或修改用户
    async function submitForm(){
        await formRef.value?.validate(async (valid, _fields)=>{
            if(valid){
                const res = await changeAdminPassword({password: formObj.password})
                if(res.data.errno == 0){
                    //修改密码成功
                    ElMessage.success(res.data.errmsg+"，请重新登录")
                    //跳转到登录页面
                    router.push("/login")
                }
                else{
                    //修改密码失败
                    ElMessage.error(res.data.errmsg)
                }
            }
        })
    }

    //重置表单
    function resetForm(){
        formObj.password = ""
        formObj.checkpwd = ""
    }
</script>

<template>
    <section class="person_info">
        <div>个人信息</div>
        <div>
            <el-form ref="formRef" :model="formObj" :rules="rules" label-width="200" status-icon>
                <el-form-item label="修改密码" prop="password">
                    <el-input v-model="formObj.password" style="width:90%;" placeholder="请填写账号密码" type="password"></el-input>
                </el-form-item>
                <el-form-item label="请再次输入密码" prop="checkpwd">
                    <el-input v-model="formObj.checkpwd" style="width:90%;" placeholder="请填写确认密码" type="password"></el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-button type="primary" @click="submitForm">提交</el-button>
                    <el-button @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </section>
</template>

<style scoped>
    .person_info{
        border:1px solid #E4E7ED;
        border-radius: 5px;
        width:70%;
        box-shadow: 0px 0px 5px 5px #E4E7ED;
        margin:20px 20px 20px 0px;
    }
    .person_info > div:nth-child(1){
        font-size:15px;
        text-indent: 15px;
        line-height:50px;
        border-bottom:1px solid #E4E7ED;
    }
    .person_info > div:nth-child(2){
        margin-top:30px;
    }
</style>
